<template>
  <view class="page-content">
    <view>
      <u-cell-group>
        <u-cell-item
          title="头像"
          :arrow="false"
          hover-class="none"
          :value-style="cellValStyle"
          :title-style="cellLabelSty2"
        >
          <image :src="userinfo.img" mode="aspectFill" class="img" webp></image>
        </u-cell-item>
        <u-cell-item
          title="姓名"
          v-if="userinfo.realName"
          :value="userinfo.realName"
          :arrow="false"
          hover-class="none"
          :value-style="cellValStyle"
          :title-style="cellLabelStyle"
        ></u-cell-item>
        <u-cell-item
          title="微信昵称"
          :value="userinfo.nickName"
          :arrow="false"
          hover-class="none"
          :value-style="cellValStyle"
          :title-style="cellLabelStyle"
        ></u-cell-item>
        <u-cell-item
          title="手机号"
          :value="userinfo.username"
          :arrow="false"
          hover-class="none"
          :value-style="cellValStyle"
          :title-style="cellLabelStyle"
        ></u-cell-item>
        <!-- <u-cell-item
          title="性别"
          v-if="userinfo.sex"
          :value="userinfo.sex"
          :arrow="false"
          hover-class="none"
          :value-style="cellValStyle"
          :title-style="cellLabelSty2"
        ></u-cell-item> -->
        <!-- <u-cell-item
          title="地址"
          v-if="userinfo.provinceName"
          :value="userinfo.provinceName - userinfo.cityName - userinfo.areaName"
          :arrow="false"
          hover-class="none"
          :value-style="cellValStyle"
          :title-style="cellLabelStyle"
        ></u-cell-item> -->
      </u-cell-group>
    </view>
    <view style="margin-top: 16rpx">
      <u-cell-group>
        <u-cell-item
          title="修改信息"
          :value-style="cellValStyle"
          :title-style="cellLabelSty2"
          @click="cellClickHandle"
          index="changePassword"
        ></u-cell-item>
      </u-cell-group>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      cellLabelStyle: {
        fontSize: '30rpx',
        color: '#666'
      },
      cellValStyle: {
        fontSize: '30rpx'
      },
      cellLabelSty2: {
        fontSize: '30rpx',
        color: '#333'
      }
    }
  },
  computed: {
    userinfo() {
      return this.$store.state.userInfo
    }
  },
  methods: {
    cellClickHandle(type) {
      this.$u.route('/pages/mine/upteUserInfo')
    }
  }
}
</script>

<style lang="scss" scoped>
.page-content {
  padding-top: 16rpx;
}
.img {
  width: 100rpx;
  height: 100rpx;
}
</style>
